// webpack的配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const EslintWebpackPlugin = require('eslint-webpack-plugin')

module.exports = {
    /* // 单页面应用：
    // 1.入口
    entry: './src/index.js',// 告诉webpack从这个文件开始打包

    // 2.输出
    output: {
        // __dirname 返回当前配置文件所在目录的绝对路径
        path: undefined,// 开发模式在内存中打包，不生成dist目录
        filename: 'main.js'// 告诉webpack打包后文件的名称
    }, */

    // 多页面应用：
    // 1.入口
    entry: {
        'index': './src/index.js',// 首页入口
        'list': './src/list.js',// 列表入口
        'detail': './src/detail.js'// 详情入口
    },

    // 2.输出
    output: {
        // __dirname 返回当前配置文件所在目录的绝对路径
        path: undefined,// 开发模式在内存中打包，不生成dist目录
        // [name] 占位符，使用入口的key名称
        // [hash:4] 占位符，使用4位哈希值
        filename: './js/[name].[hash:4].js'// 告诉webpack打包后文件的名称
    },

    // 3.加载器
    module: {
        rules: [
            // loader的配置
            {
                // 匹配.css结尾的资源
                test: /\.css$/,
                // 匹配到css资源时，先使用css-loader，再使用style-loader来处理css资源
                use: ["style-loader","css-loader"] // 从右到左执行
            },
            {
                // 匹配.less结尾的资源
                test: /\.less$/,
                // 匹配到less资源时，先使用less-loader编译成css，再使用css-loader和style-loader来处理css资源
                use: ["style-loader","css-loader","less-loader"] // 从右到左执行
            },
            {
                // 匹配图片资源
                test: /\.(png|jpe?g|gif|svg)/,
                // 资源模块类型
                type: "asset",// 相当于使用了file-loader和url-loader
                parser: {
                    // 设置图片小于10kb时，将图片转成base64编码
                    dataUrlCondition: {
                        // 优点：减少图片数量，减少请求服务器次数
                        // 缺点：图片体积变大 8.04kb -> 8.2kb
                        maxSize: 1024 * 10
                    }
                },
                generator: {
                    // 设置图片打包后的存储目录和文件名称
                    // [hash:5] 占位符，取5位哈希值
                    // [ext] 占位符，使用文件原来的后缀名
                    filename: "imgs/[hash:5][ext]"
                }
            },
            {
                // 匹配其他资源
                test: /\.(eot|ttf|woff2?)$/,
                // 资源模块类型
                type: "asset",// 相当于使用了file-loader和url-loader
                generator: {
                    // 设置资源打包后的存储目录和文件名称
                    // [hash:5] 占位符，取5位哈希值
                    // [ext] 占位符，使用文件原来的后缀名
                    filename: "fonts/[hash:5][ext]"
                }
            }
        ]
    },

    // 4.插件
    plugins: [
        // plugins的配置（创建插件的实例）
        new HtmlWebpackPlugin({// 插件的配置项
            // 以 public/index.html 文件作为模板打包创建一个新的html文件
            // 新的html文件有两个特征：
            // 1.内容和模板文件一样
            // 2.自动引入打包生成的js文件
            template: path.join(__dirname,'public/index.html'),// 设置打包的模板文件(绝对路径)
            filename: './index.html',// 设置打包html之后存储目录和文件名称
            chunks: ['index'],// 当前打包的html页面使用index入口打包生成的js资源
        }),
        new HtmlWebpackPlugin({// 插件的配置项
            // 以 public/list.html 文件作为模板打包创建一个新的html文件
            // 新的html文件有两个特征：
            // 1.内容和模板文件一样
            // 2.自动引入打包生成的js文件
            template: path.join(__dirname,'public/list.html'),// 设置打包的模板文件(绝对路径)
            filename: './list.html',// 设置打包html之后存储目录和文件名称
            chunks: ['list'],// 当前打包的html页面使用list入口打包生成的js资源
        }),
        new HtmlWebpackPlugin({// 插件的配置项
            // 以 public/detail.html 文件作为模板打包创建一个新的html文件
            // 新的html文件有两个特征：
            // 1.内容和模板文件一样
            // 2.自动引入打包生成的js文件
            template: path.join(__dirname,'public/detail.html'),// 设置打包的模板文件(绝对路径)
            filename: './detail.html',// 设置打包html之后存储目录和文件名称
            chunks: ['detail'],// 当前打包的html页面使用detail入口打包生成的js资源
        }),
        new EslintWebpackPlugin({// 插件的配置项
            // 指定检查的文件目录src
            context: path.join(__dirname,'src'),
            // 排除检查的文件目录lib
            exclude: path.join(__dirname,'src/js/lib')
        })
    ],

    // 5.模式
    mode: 'development', // 开发模式

    // 开发服务器
    devServer: {
        host: "localhost",// 开发服务器的主机名
        port: 9090,// 开发服务器的端口号
        open: true,// 开启打包完成后自动在默认浏览器打开页面
        hot: true,// 开头模块热替换（自动刷新页面）
    }
}
